<template>
  <div class="barContent">
    <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入曲线图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/pictorialBar");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pictorialBar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/legendScroll");
require("echarts/lib/component/graphic");
require("echarts/lib/component/visualMap");
require("echarts/lib/component/dataZoom");
require("echarts/lib/component/markLine");
require("echarts/lib/component/grid");

export default {
  name: "MylineChart",
  components: {
    echarts,
  },
  props: ["echartsClass", "echartsData"],
  data() {
    return {
      myChart: null,
    };
  },
  created() { },
  beforeCreate() { },
  mounted() {
    let dom = this.$refs.myChart;
    this.myChart = echarts.init(dom);
    this.initChart();
  },
  methods: {
    initChart() {
      switch (this.echartsClass) {
        case "normalLine":
          this.normalLine();
          break;
        case "moreLine":
          this.moreLine();
          break;
        case "moreLineNew":
          this.moreLineNew();
          break;
        case "initChartByOption":
          this.initChartByOption();
          break;
        case "eqipInfoLine":
          this.eqipInfoLine();
          break;
        case "normalLine2": //用于地图标注点击后展示曲线
          this.normalLine2();
          break;
        case "DriverBehaviorAnalysisBar": //用于地图标注点击后展示曲线
          this.DriverBehaviorAnalysisBar();
          break;
        case "speedLine":
          this.speedLine();
          break;
      }
    },
    //直接传入option进行初始化--外部构造option
    initChartByOption() {
      let option = {
        title: {
          text: "",
          subtext: "",
          left: "center",
          align: "right",
        },
        grid: {
          bottom: 20,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765",
            },
          },
        },
        legend: {
          data: ["水位", "累计降雨量"],
          left: 20,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: [
              "2009/6/12 2:00",
              "2009/6/12 3:00",
              "2009/6/12 4:00",
              "2009/6/12 5:00",
              "2009/6/12 6:00",
              "2009/6/12 7:00",
              "2009/6/12 8:00",
              "2009/6/12 9:00",
              "2009/6/12 10:00",
            ].map(function (str) {
              return str.replace(" ", "\n");
            }),
          },
        ],
        yAxis: [
          {
            name: "流量(m^3/s)",
            type: "value",
            max: 500,
          },
          {
            name: "降雨量(mm)",
            nameLocation: "start",
            max: 5,
            type: "value",
            inverse: true,
          },
        ],
        series: [
          {
            name: "流量",
            type: "line",
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            markArea: {
              silent: true,
              data: [
                "2009/6/12 2:00",
                "2009/6/12 3:00",
                "2009/6/12 4:00",
                "2009/6/12 5:00",
                "2009/6/12 6:00",
                "2009/6/12 7:00",
                "2009/6/12 8:00",
                "2009/6/12 9:00",
                "2009/6/12 10:00",
              ],
            },
            data: [0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6],
          },
          {
            name: "降雨量",
            type: "bar",
            yAxisIndex: 1,
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            markArea: {
              silent: true,
              data: [
                "2009/6/12 2:00",
                "2009/6/12 3:00",
                "2009/6/12 4:00",
                "2009/6/12 5:00",
                "2009/6/12 6:00",
                "2009/6/12 7:00",
                "2009/6/12 8:00",
                "2009/6/12 9:00",
                "2009/6/12 10:00",
              ],
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      //先清除之前的效果，避免冲突
      this.myChart.clear();
      if (this.echartsData) {
        option = this.echartsData;
      }
      this.myChart.setOption(option);
    },
    // 实时监控-详情-左下角图
    normalLine() {
      var data = {
        title: "",
        xAxisData: ['2021-09-07', '2021-09-08'],
        yAxisData: [6, 10],
      };
      if (this.echartsData.xAxisData) {
        data = this.echartsData;
      }
      this.myChart.clear();
      this.myChart.setOption(
        {
          title: {
            text: data.title,
            left: 'center',
            top: 20,
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              let str = "时间：" + params[0].axisValue + "<br />" + "速度：" + params[0].value + " km/h";
              return str;
            },
          },
          grid: {
            top: '15%',
            left: '8%',
            right: '8%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: data.xAxisData,
            axisLabel: {
              formatter: function (value, index) {
                return value.slice(5);
              },
            }
          },
          yAxis: {
            type: 'value',
            name: "速度(km/h)"
          },
          series: [
            {
              type: 'line',
              smooth: true,
              data: data.yAxisData,
              // markLine: {
              //   symbol: ['none', 'none'], // 去掉箭头
              //   label: {
              //     show: false,
              //     position: 'start',
              //     formatter: '{b}'
              //   },
              //   data: [
              //     {
              //       name: '阈值',
              //       yAxis: 0.8
              //     }
              //   ],
              //   lineStyle: {
              //     color: '#0066FF'
              //   }
              // }
            }
          ],
        }
      );
    },
    // 轨迹跟踪-速度-右上角图
    speedLine() {
      var data = {
        title: "",
        xAxisData: [],
        yAxisData: [6, 10],
      };
      if (this.echartsData.xAxisData) {
        data = this.echartsData;
      }
      this.myChart.clear();
      this.myChart.setOption(
        {
          title: {
            text: data.title,
            left: 'center',
            top: 20,
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              let str = "时间：" + params[0].axisValue + "<br />" + "速度：" + params[0].value + " km/h";
              return str;
            },
          },
          grid: {
            top: '25%',
            left: '8%',
            right: '8%',
            bottom: '0',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: data.xAxisData,
            axisLabel: {
              interval: (index, value) => {
                return false
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "速度(km/h)"
          },
          series: [
            {
              type: 'line',
              smooth: true,
              data: data.yAxisData,
            }
          ],
        }
      );
    },
    realtimeStatClick() {
      this.$nextTick(v => {
        this.myChart.resize()
      })
    },
    moreLineNew123() {
      this.myChart.clear();
      this.myChart.setOption({
        grid: {
          show: true,
          borderColor: "#cccccc",
          // width: '680px',
          // height: '300px',
          left: "5%",
          right: "5%",
          top: "26%",
          bottom: "10%",
        },
        xAxis: {
          type: "time",
          name: "时间",
          boundaryGap: false,
          //data: data.xAxisData,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },
        yAxis: {
          type: "value",
          //name: "单位/" + data.yAxisName,
          nameTextStyle: {
            color: "#414456",
            align: "left",
          },
          // max: function(value) {
          //   return value.max + (value.max - value.min) * 0.5;
          // },
          // min: function(value) {
          //   return value.min - (value.max - value.min) * 0.5;
          // },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },

        series: [
          {
            type: "line",
            data: [
              ["2020-02-01 10:10:10", 100],
              ["2020-03-01 10:10:10", 80],
              ["2020-04-01 10:10:10", 100],
            ],
          },
          {
            type: "line",
            data: [
              ["2020-02-01 10:10:10", 120],
              ["2020-03-01 10:10:10", 70],
              ["2020-05-01 10:10:10", 160],
            ],
          },
        ],
      });
    },
    // 多条曲线
    moreLineNew() {
      // var data = {
      //   legendData: ["A项电流", "B项电流", "C项电流"],
      //   xAxisData: ["2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00"],
      //   seriesData: [
      //     { name: "A项电流", value: [220, 232, 201, 234, 239, 230, 210] },
      //     { name: "B项电流", value: [220, 212, 221, 234, 240, 230, 205] },
      //     { name: "C项电流", value: [211, 214, 221, 204, 200, 231, 208] },
      //   ],
      //   title: "",
      //   yAxisName: "",
      //   color: ["#ffad05", "#3dd1f9", "#8de1d9"],
      // };
      var data = {
        legendData: ["A项电流", "B项电流", "C项电流"],
        xAxisData: [],
        seriesData: [
          { name: "A项电流", value: [] },
          { name: "B项电流", value: [] },
          { name: "C项电流", value: [] },
        ],
        title: "",
        yAxisName: "-",
        color: ["#ffad05", "#3dd1f9", "#8de1d9"],
      };
      if (this.echartsData.seriesData) {
        data = this.echartsData;
      }

      let series = [];
      data.seriesData.forEach((v) => {
        if (v.name == "最小值") {
          series.push({
            name: v.name,
            type: "line",
            smooth: true, //是否平滑曲线显示
            data: v.value,

            markLine: {
              lineStyle: {
                color: "#61a0a8",
              },
              data: [
                { type: "min", name: "最小值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "min",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "最小值",
                    },
                    type: "min",
                    name: "最低点",
                  },
                ],
              ],
            },
          });
        } else if (v.name == "最大值") {
          series.push({
            name: v.name,
            type: "line",
            smooth: true, //是否平滑曲线显示
            data: v.value,
            markLine: {
              lineStyle: {
                color: "#c23531",
              },
              data: [
                { type: "max", name: "最大值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "最大值",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          });
        } else {
          series.push({
            name: v.name,
            type: "line",
            smooth: true, //是否平滑曲线显示
            data: v.value,
          });
        }
      });
      this.myChart.clear();
      this.myChart.setOption({
        title: {
          text: data.title,
          textStyle: {
            color: "#414456",
            fontSize: "16",
            fontFamily: "微软雅黑",
            fontWeight: "600",
          },
          left: "2%",
          //right: "10%",
          top: "5",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            // var tooltip = params[0].name + "</br>";
            var tooltip = "";
            let unit;
            params.forEach((v) => {
              data.seriesData.forEach((vv) => {
                if (vv.name == v.seriesName) {
                  unit = vv.unit;
                  return false;
                }
              });
              tooltip +=
                v.marker + v.seriesName + ":" + v.value + " " + unit + "</br>";
            });

            return tooltip;
          },
        },
        color: data.color,
        legend: {
          top: "12%",
          width: "70%",
          data: data.legendData,
          textStyle: {
            color: "#414456",
          },
          type: "scroll",
        },
        grid: {
          show: true,
          borderColor: "#cccccc",
          // width: '680px',
          // height: '300px',
          left: "5%",
          right: "5%",
          top: "26%",
          bottom: "15%",
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: "time",
          name: "时间",
          boundaryGap: false,
          // data: data.xAxisData,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },
        yAxis: {
          type: "value",
          name: "单位/" + data.yAxisName,
          nameTextStyle: {
            color: "#414456",
            align: "left",
          },
          max: function (value) {
            return value.max + (value.max - value.min) * 0.5;
          },
          min: function (value) {
            return value.min - (value.max - value.min) * 0.5;
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },

        series: series,
      });
    },
    // 多条曲线
    moreLine() {
      // var data = {
      //   legendData: ["A项电流", "B项电流", "C项电流"],
      //   xAxisData: ["2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00"],
      //   seriesData: [
      //     { name: "A项电流", value: [220, 232, 201, 234, 239, 230, 210] },
      //     { name: "B项电流", value: [220, 212, 221, 234, 240, 230, 205] },
      //     { name: "C项电流", value: [211, 214, 221, 204, 200, 231, 208] },
      //   ],
      //   title: "",
      //   yAxisName: "",
      //   color: ["#ffad05", "#3dd1f9", "#8de1d9"],
      // };
      var data = {
        legendData: ["A项电流", "B项电流", "C项电流"],
        xAxisData: [],
        seriesData: [
          { name: "A项电流", value: [] },
          { name: "B项电流", value: [] },
          { name: "C项电流", value: [] },
        ],
        title: "",
        yAxisName: "",
        color: ["#ffad05", "#3dd1f9", "#8de1d9"],
      };
      if (this.echartsData.seriesData) {
        data = this.echartsData;
      }

      let series = [];
      data.seriesData.forEach((v) => {
        series.push({
          name: v.name,
          type: "line",
          smooth: true, //是否平滑曲线显示
          data: v.value,
        });
      });
      this.myChart.clear();
      this.myChart.setOption({
        title: {
          text: data.title,
          textStyle: {
            color: "#414456",
            fontSize: "16",
            fontFamily: "微软雅黑",
            fontWeight: "500",
          },
          left: "9.5%",
          right: "9.5%",
          top: "10",
        },
        tooltip: {
          trigger: "axis",
        },
        color: data.color,
        legend: {
          top: "8%",
          width: "70%",
          data: data.legendData,
          textStyle: {
            color: "#414456",
          },
        },
        grid: {
          show: true,
          borderColor: "#cccccc",
          width: "680px",
          height: "300px",
          left: "9%",
          right: "9%",
          top: "20%",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.xAxisData,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },
        yAxis: {
          type: "value",
          name: data.yAxisName,
          nameTextStyle: {
            color: "#414456",
            align: "left",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },
        series: series,
      });
    },
    // 设备监测模块曲线
    eqipInfoLine() {
      var data = {
        xAxisData: [],
        seriesData: [],
        title: "养生大道积水点实时曲线",
        yAxisName: "",
        color: ["#1b9dec"],
      };
      if (this.echartsData) {
        data = this.echartsData;
      }
      this.myChart.clear();
      this.myChart.setOption({
        title: {
          text: data.title,
          textStyle: {
            color: "#414456",
            fontSize: "16",
            fontFamily: "微软雅黑",
            fontWeight: "500",
          },
          left: "9.5%",
          right: "9.5%",
          top: "10",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{c}" + data.yAxisName,
        },
        color: data.color,
        grid: {
          show: true,
          borderColor: "#cccccc",
          width: "680px",
          height: "300px",
          left: "9%",
          right: "9%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.xAxisData,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },
        yAxis: {
          type: "value",
          name: data.yAxisName,
          nameTextStyle: {
            color: "#414456",
            align: "left",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e9edef",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#cccccc",
            },
          },
          axisLabel: {
            color: "#414456",
            fontSize: "14px",
          },
        },
        series: [
          {
            data: data.seriesData,
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2AA4EA",
                  },
                  {
                    offset: 1,
                    color: "#b8dff5",
                  },
                ]),
              },
            },
          },
        ],
      });
    },
    // 正常线图
    normalLine2() {
      var data = {
        seriesData: [820, 932, 901, 934, 1290, 1330, 1320],
        xAxis: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        titleText: "",
        color: {
          fi: "#fff",
          se: "#1A65B1",
        },
        unit: "",
      };
      if (this.echartsData) {
        data.seriesData = this.echartsData.seriesData
          ? this.echartsData.seriesData
          : data.seriesData;
        data.xAxis = this.echartsData.xAxis ? this.echartsData.xAxis : data.xAxis;
        data.titleText = this.echartsData.titleText
          ? this.echartsData.titleText
          : data.titleText;
        data.unit = this.echartsData.unit ? this.echartsData.unit : data.unit;
        data.color = this.echartsData.color ? this.echartsData.color : data.color;
      }

      this.myChart.setOption({
        grid: {
          bottom: "15%",
          right: "6%",
          left: "10%",
        },
        title: {
          text: data.titleText,
          textStyle: {
            color: "#fff",
            fontStyle: {
              fontSize: 16,
              fontFamily: "微软雅黑",
            },
          },
          left: "5%",
          top: "5%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: false,
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
            },
          },
          axisLabel: {
            color: data.color.fi,
          },
          splitLine: {
            lineStyle: {
              color: "#dadada",
              opacity: 0.2,
            },
            show: true,
          },
          data: data.xAxis,
        },
        yAxis: {
          max: function (value) {
            return ((value.max / 2) * 3).toFixed(0);
          },
          type: "value",
          name: data.unit,
          axisTick: false,
          splitLine: {
            lineStyle: {
              color: "#dadada",
              opacity: 0.2,
            },
            show: true,
          },
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
            },
          },
          axisLabel: {
            color: data.color.fi,
          },
        },
        series: [
          {
            type: "line",
            smooth: true, //是否平滑曲线显示
            lineStyle: {
              color: "rgb(0,255,255)",
              shadowColor: "#43A7DB",
              width: 2,
            },
            symbol: "none",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(0,206,209)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(64,224,208,0.2)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: data.seriesData,
          },
        ],
      });
    },
    // 驾驶员分析
    DriverBehaviorAnalysisBar() {
      const nameList = [], valueList = []
      if (this.echartsData.data.length === 0) {
        nameList.push('暂无');
        valueList.push(0);
      } else {
        this.echartsData.data.forEach((el) => {
          nameList.push(el.name)
          valueList.push(el.value)
        })
      }
      this.myChart.setOption({
        title: [
          {
            text: this.echartsData.title,
            textStyle: {
              fontSize: 16,
              color: "#000",
              fontFamily: "微软雅黑",
              fontWeight: "500",
            },
            textAlign: "left",
            left: "5%",
            //right: "10%",
            top: "5",
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: nameList,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            splitNumber: 3,
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '告警次数',
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              normal: {
                color: '#EA4942'
              },
            },
            data: valueList
          }
        ]
      })
    },
  },
  watch: {
    echartsData: {
      handler: function (val, oldVal) {
        this.initChart();
      },
      deep: true,
    },
    "$store.state.client"(val) {
      this.myChart.resize()
    },
  },
};
</script>

<style>
.barContent {
  height: 100%;
  width: 100%;
}
</style>
